<template>
	<cl-dialog
		:title="editing ? '修改落地页' : '新增落地页'"
		width="400px"
		:visible.sync="visible"
		:before-close="beforeClose"
		@close="close"
		:props="{
			top: '5vh',
			appendToBody: true,
			closeOnClickModal: false
		}"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-form-item label="所属事业部" prop="biz_id">
				<cl-select
					v-model="form.biz_id"
					placeholder="请选择事业部"
					filterable
					:disabled="editing"
					@change="changeBiz"
					style="width: 100%"
				>
					<el-option
						v-for="item in business"
						:key="item.biz_id"
						:label="item.biz_name"
						:value="item.biz_id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item ref="brand" label="品牌" prop="bra_id">
				<cl-select
					v-model="form.bra_id"
					placeholder="请选择品牌"
					style="width: 100%"
					filterable
					@change="chanBra"
				>
					<el-option
						:label="item.bra_name"
						:value="item.bra_id"
						v-for="(item, index) in bizRefData.brand"
						:key="index"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="标题" prop="name">
				<el-input placeholder="请填写标题" v-model.trim="form.name" clearable />
			</el-form-item>

			<el-form-item label="选择运营部门" prop="operator_dept">
				<cl-select
					v-model="form.operator_dept"
					style="width: 100%"
					placeholder="请选择运营部门"
					filterable
					@change="changeDept"
				>
					<el-option
						v-for="item in deptList"
						:key="item.dept_id"
						:label="item.dept_name"
						:value="item.dept_id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="选择运营人员" prop="operator_id">
				<cl-select
					v-model="form.operator_id"
					style="width: 100%"
					placeholder="请选择运营人员"
					filterable
					@change="changeUser"
				>
					<el-option
						v-for="item in userList"
						:key="item.user_id"
						:label="item.user_name"
						:value="item.user_id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="广告账户ID" prop="id_supplier">
				<cl-select
					v-model="form.id_supplier"
					placeholder="请选择"
					style="width: 100%"
					filterable
				>
					<el-option
						v-for="item in distributorList"
						:key="item.id"
						:label="item.supplie_id"
						:value="item.id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="客服码类型" prop="contact_type">
				<el-radio-group v-model="form.contact_type" size="mini">
					<el-radio :label="5" border>企微码</el-radio>
					<el-radio :label="1" border>加微号</el-radio>
					<el-radio :label="4" border>加微码</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" :loading="saving" @click="submit">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script>
export default {
	data() {
		return {
			visible: false,
			editing: false,
			saving: false,
			form: {
				id: undefined,
				biz_id: "",
				bra_id: "",
				operator_dept: "",
				operator_id: "",
				name: "",
				type: 1,
				contact_type: "",
				wx_pool_city: "",
				id_supplier: ""
			},
			rules: {
				biz_id: [{ required: true, message: "请选择所属事业部" }],
				bra_id: [{ required: true, message: "请选择品牌" }],
				operator_dept: [{ required: true, message: "请选择部门" }],
				operator_id: [{ required: true, message: "请选择运营人员" }],
				name: { required: true, message: "请填写标题" },
				type: [{ required: true, message: "请选择类型" }],
				contact_type: [{ required: true, message: "请选择客服码类型" }],
				wx_pool_city: [{ required: true, message: "请选择城市" }],
				id_supplier: [{ required: true, message: "请选择广告账户" }]
			},
			// 部门列表
			deptList: [],
			// 人员列表
			userList: [],
			cityList: [],
			distributorList: []
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
		this.form.bra_id = this.bizRefData.brand[0].bra_id;
	},
	methods: {
		open(editing = false, data = {}) {
			this.visible = true;
			this.editing = editing;
			if (editing) {
				this.form = { ...this.form, ...data };
			}
			this.form.wx_pool_city = data.wx_pool_city ? data.wx_pool_city : "";
			this.bizRelevanceList();
			this.getCityList();
		},
		beforeClose(done) {
			!this.saving && done();
		},
		close() {
			this.reset();
			this.visible = false;
		},
		reset() {
			this.form = {
				id: undefined,
				biz_id: this.getCurrBiz(),
				operator_dept: "",
				operator_id: "",
				name: "",
				type: 1,
				contact_type: 0,
				wx_pool_city: "",
				id_supplier: ""
			};
			this.$refs.form.resetFields();
		},
		changeBiz() {
			this.form.bra_id = "";
			this.form.operator_dept = "";
			this.form.operator_id = "";
			this.form.wx_pool_city = "";
			this.form.id_supplier = "";

			this.getBrand();
			this.bizRelevanceList();
			this.getAdvertiserList();
			this.getCityList();
		},
		chanBra() {
			this.form.id_supplier = "";
			this.getAdvertiserList();
		},
		changeDept() {
			this.form.operator_id = "";
			this.getUserList();
		},
		changeUser() {
			this.form.id_supplier = "";
			this.getAdvertiserList();
		},
		bizRelevanceList() {
			this.getDeptList();
			this.getUserList();
		},
		//获取品牌
		async getBrand() {
			const { biz_id } = this.form;
			const data = await this.getBizRefBrand(biz_id);
			this.form.bra_id = data.length == 1 ? data[0]?.bra_id ?? "" : "";
		},
		// 部门
		async getDeptList() {
			const { biz_id } = this.form;
			this.deptList = [];
			if (!biz_id) return;
			this.deptList = await this.$store.dispatch("common/getDept", {
				needAll: false,
				parent_id: 0,
				is_store: 0,
				biz_id,
				post: 4
			});
		},
		// 人员列表
		async getUserList() {
			const { biz_id, operator_dept } = this.form;
			this.userList = [];
			if (!biz_id || !operator_dept) return;
			this.userList = await this.$store.dispatch("common/getDeptStaff", {
				needAll: false,
				biz_id,
				dept_id: operator_dept,
				post: 4
			});
		},
		// 获取城市
		async getCityList() {
			const { biz_id, bra_id } = this.form;
			this.$service.spread.newGetbizcity({ biz_id, bra_id, user_manager: 1 }).then(data => {
				let list = (data || []).map(v => ({ ...v, label: v.name, value: v.id }));
				this.cityList = list;
			});
		},
		// 获取对应分销商账号
		async getAdvertiserList() {
			let { biz_id, bra_id, operator_id } = this.form;
			this.distributorList = [];
			let data = await this.$service.config.distributorLists({
				biz_id,
				bra_id,
				user_id: operator_id
			});
			this.distributorList = data;
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				await this.$service.ad[this.editing ? "update" : "add"](this.form).done(() => {
					this.saving = false;
				});
				this.$message.success(this.editing ? "修改成功" : "新增成功");
				this.close();
				this.$emit("confirm", this.editing);
			});
		}
	}
};
</script>
